<template>
	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
		<el-form-item prop="username" class="login_input">
			<el-input v-model="form.username"  prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')" >
			</el-input>
		</el-form-item>
		<el-form-item prop="password" class="login_input" >
			<el-input v-model="form.password"   prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
		</el-form-item>
		<!-- <el-form-item prop="code">
			<el-input v-model="form.code"  :placeholder="$t('login.CODEPlaceholder')">
				<template #suffix>
        	<img :src="captch" alt="" @click="onGetCaptch" class="captchImg">
      	</template>
			</el-input>
		</el-form-item> -->
		<el-form-item>
			<el-button type="primary" class="loginBtn" :loading="islogin"  @click="login">{{ $t('login.signIn') }}</el-button>
		</el-form-item>
		<div class="login-reg">
			<span>{{$t('login.noAccount')}}</span> <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
		</div>
	</el-form>
</template>

<script>
	export default {
		data() {
			return {
				userType: 'admin',
				codeKey: '',
				captch: '',
				form: {
					username: "",
					password: "",
					// autologin: false,
					code: '1234',
					uuid: '',
				},
				rules: {
					username: [
						{required: true, message: this.$t('login.userError'), trigger: 'blur'}
					],
					password: [
						{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
					],
					code: [
						{required: true, message:'请输入验证码', trigger: 'blur'}
					]
				},
				islogin: false,
			}
		},
		mounted() {
			// this.onGetCaptch()
		},
		methods: {
			async login(){
				var validate = await this.$refs.loginForm.validate().catch(()=>{})
				if(!validate){ return false }

				this.islogin = true
				var data = this.form
				
				//登录
				this.$store.dispatch('login', data).then(res => {
					if(res.access_token){
						this.$message.success("登录成功")
						this.$router.push({
							path: '/'
						})
					}
					
				}).finally(() => {
					this.islogin = false
				})
			},
			// 获取验证码
			async onGetCaptch() {
				var res = await this.$API.auth.getCode.get();
				if(res.code == 200){
					this.captch = "data:image/gif;base64," + res.img
					this.form.uuid = res.uuid
				}
			},
		}
	}
</script>

<style scoped lang="scss">
::v-deep .login_input .el-input__wrapper {
	border-radius: 30px;
	height: 46px;
}
/* ::v-deep .login_input .el-input__inner:focus {
	border: 1px solid #4A6CF7;
	box-shadow: 0 10px 20px rgba(74, 108, 247, 0.25);
} */
::v-deep .el-input__wrapper.is-focus {
	box-shadow: 0 0 0 1px #4A6CF7 inset !important;
	
}
::v-deep .el-input__icon {
	font-size: 18px;
	margin-right: 12px;
}
.captchImg {
	width: 100px;
	height: 46px;
	cursor: pointer;
}
.loginBtn {
	width: 100%;
	height: 46px;
	border-radius: 30px;
	font-size: 16px;
	 /* 渐变配色 - 根据图片效果调整 */
	 background: linear-gradient(135deg, #4A6CF7 0%, #7B2FFD 100%);
	 transition: all 0.3s ease;
	 border: none;
}
.loginBtn:hover {
	background: linear-gradient(135deg, #5A7AF8 0%, #8B3FFF 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(74, 108, 247, 0.25);
}
.login-reg span {
	color: #fff;
	opacity: .8;
}
.login-reg a {
	color: #3ad9f3 !important;

}
.login-reg a:hover {
	color: #62eaff !important;
}

</style>
